<template>
  <div id="app">
    <!-- <header class="header">
      <div class="logo" style="margin-left: 100px;">
        <img src="../../../static/login/blickICON.png" alt="">
       
      </div>
      <nav class="nav">
        <ul>
          <li><a href="#">展示搜索</a></li>
          <li><a href="#">排行指数</a></li>
          <li><a href="#">免费流程</a></li>
        </ul>
      </nav>
      <div class="user-actions">
        <img style="padding-right: 10px;" src="../../../static/login/user.png"/>
        <a href="#" >登录</a> | <a style="padding-left: 8px;" href="#"> 注册</a>
        <i class="heart-icon"></i>
        <i class="menu-icon"  @click="toggleMobileMenu">
          <img src="../../../static/login/sc.png"/>
        </i>
      </div>
      
    </header> -->

    <!-- 头部导航 -->
    <newPageHeader></newPageHeader>
    <main class="main">
      <div class="bg-image">
        <img src="../../../static/login/loginBg.png" alt="">
      </div>
      <div class="login-box">
        <div class="loginTitle">
          <div v-if="showType == false" class="login-tabs">
            <span :class="{ active: isBuyer }" @click="maiJiaOnChange">我是买家</span>
            <span class="spanTwo" :class="{ active: !isBuyer }" @click="JiaOnChange">我是卖家</span>
          </div>
          <form v-if="showType == false">
            <div class="input-group">
              <i>
                <img src="../../../static/login/CellPhone.png" alt="">
              </i>
              <input class="loginInput" type="text" placeholder="请输入手机号" v-model="form.mobile">
            </div>
            <div class="input-group">
              <i>
                <img src="../../../static/login/cipher.png" alt="">
              </i>
              <input class="loginInput" type="password" placeholder="请输入密码" v-model="form.password">
            </div>
            <div class="input-group" style="display: flex;margin-bottom: 25px!important;">
              <i>
                <img src="../../../static/login/VerificationCode.png" alt="">
              </i>
              <input style="width: 75%;" type="text" placeholder="请输入验证码" v-model="captcha">
              <img :src="captchaSrc" alt="" class="captcha-img" @click="generateCaptcha">
            </div>
            <div class="remember-me">
              <div>
                <input class="inputCheckbox" type="checkbox" v-model="rememberMe">
                <span class="jzText">记住密码</span>
              </div>
              <a href="#" class="wjMText" @click.prevent="forgotPassword">忘记密码</a>
            </div>
            <button type="button" class="login-btn" @click="login">登录</button>
            <a href="#" @click.prevent="registerLink" class="register-link">立即注册</a>
          </form>

          <h1 v-if="showType == true" class="czTitle">重置密码</h1>


          <form v-if="showType == true">
            <div class="input-group">
              <i class="iTitle">
                手机号
              </i>
              <input class="inputTwo" type="text" placeholder="请输入手机号" v-model="phone">
            </div>
            <div class="input-group">
              <i class="iTitle">
                验证码
              </i>
              <input class="inputTwo" type="text" placeholder="请输入验证码" v-model="password">
              <div class="czMcode" @click="getCode" v-if="timeNum <1" style="cursor: pointer;">
                获取验证码
              </div>
              <div class="czMcode" v-if="timeNum>0">
                {{ timeNum }}s
              </div>
            </div>
            <div class="input-group" style="margin-bottom: 13px!important;">
              <i class="iTitle">
                设置密码
              </i>
              <input class="inputTwo" type="password" placeholder="请输入密码" v-model="captcha">
            </div>

            <button type="button" class="login-btn" @click="resetPassword">确认</button>
            <a href="#" @click.prevent="register" class="register-link">
              <i class="el-icon-back"></i> 返回登录</a>
          </form>


        </div>


        <div class="agreement">
          <input class="inputCheckboxTwo" type="checkbox" v-model="agreedToTerms">
          <span style="padding-left: 10px;color: #999999;">我已阅读并同意 <span style="color:#007bff;cursor: pointer;" @click="xieyiDialogVisible = true">《隐私政策》</span></span>
        </div>
      </div>
    </main>


    <!-- 注册弹窗 -->


    <el-dialog :visible.sync="dialogVisible">
      <h3 class="zhuceH3">
        注册声明
      </h3>
      <div class="zcContent">
        <p class="pTitle">根据国家有关法律、法规规定，为了更好的维护船来船网系统的正常秩序，在注册前请您仔细阅读如下规则，以下是声明文字占位：</p>
        <ol>
          <li>一、用户注册规则及保密条款</li>
          <li>1、用户同意接收来自本网站的信息，提供及时、详尽及准确的资料，保证所申报项目信息的真实性和有效性，及时删除或归档过时、无效信息；</li>
          <li>2、本站的注册用户资料和全部项目信息属于保密范围，本站将尽量保障信息的安全和不受侵犯，但如果发生不可抗拒因素及用户自身原因造成的损失，如黑客入侵、服务器故障、搜索引擎录入等，本站不承担任何责任。</li>
          <li>3、审核单位和评审专家获得授权浏览，查看和下载电报资料，但不得向其他单位和个人出售、传阅或散布项目的任何资料，或向他透露项目的任何具体内容。在未经项目所有权人授权的情况下，不得将项目资料用于自身经营活动。
          </li>
          <li>
            4、注册用户单位的用户账号管理员在离职时，应该主动与原单位负责人办理用户资料交接，并办理好用户资料及密码的修改工作，当原管理员进入新单位工作时，如果需要使用用户服务、应该以新单位名义重新申请，不得再使用原单位的账号和密码。
          </li>
          <li>5、注册用户不可以将账号与其他单位或其他人共享。用户应该妥善管理本单位的账号密码，设置不易被破解的密码，如果发现账号被人盗用应该立即与我们取得联系。</li>
          <li>6、对于注册用户泄露项目资料或将项目或者用于自身经营活动而给项目所有权头带来损失的，一经查实，项目所有权人有权向其追讨相应的损失。</li>
        </ol>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="footerColse" @click="dialogVisible = false">取消</el-button>
        <el-button class="footerPay" type="primary" @click="handleAgree">同意</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="xieyiDialogVisible" title="">
      <h3 class="zhuceH3">
        隐私政策
      </h3>
      <div class="zcContent" v-html="xieyi">
        
      </div>
      <div  class="dialog-footer" style="text-align: right;">
        <el-button class="footerColse" @click="xieyiDialogVisible = false">同意</el-button>
      </div>
    </el-dialog>






    <!-- 底部footer -->

    <newPageFooter></newPageFooter>

    <!-- <footer class="footer">
      <div class="footer-columns">
        <div class="column">
          <h2>买家指南</h2>
          <ul>
            <li><a href="#">功能介绍</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">服务条款</a></li>
          </ul>
        </div>
        <div class="column">
          <h2>卖家指南</h2>
          <ul>
            <li><a href="#">入驻流程</a></li>
            <li><a href="#">申请入驻</a></li>
            <li><a href="#">邀请有礼</a></li>
          </ul>
        </div>
        <div class="column">
          <h2>关于我们</h2>
          <ul>
            <li><a href="#">平台声明</a></li>
            <li><a href="#">建议反馈</a></li>
          </ul>
        </div>
        <div class="column">
          <h2>联系我们</h2>
          <ul>
            <li style="
font-family: Arial, Arial;
font-weight: 600;
font-size: 14px;
color: #666666;
font-style: normal;
text-transform: none;"><i  >

<img  src="../../../static/login/landline.png" alt="">
</i> 400-XXX-XXX</li>
            <li style="
font-family: Arial, Arial;
font-weight: 400;
font-size: 14px;
color: #979798;
font-style: normal;
text-transform: none;"><i >

<img src="../../../static/login/mailbox.png" alt="">
</i> service@hotmail.com</li>
            <li style="
font-family: Arial, Arial;
font-weight: 400;
font-size: 14px;
color: #979798;
font-style: normal;
text-transform: none;">
<i >
  <img src="../../../static/login/position.png" alt="">
</i> 地址信息文字占位地址信息文字占位</li>
          </ul>
        </div>
      </div>
      <p class="copyright">Copyright © 2024 线上海事 All Rights Reserved. 京公网安备11010602005977号 | 蜀ICP备11019833号</p>
    </footer> -->
  </div>
</template>
<script>

import newPageHeader from '../../../components/page/engineering5188/new-page-header.vue';

import newPageFooter from '../../../components/page/engineering5188/new-page-footer.vue';

export default {
  name: "newLogin",
  components: {
    newPageHeader,
    newPageFooter
  },
  data() {
    return {
      xieyiDialogVisible:false,
      dialogVisible: false,
      isBuyer: true,
      showType: false,
      agreedToTerms: true,
      rememberMe: "",
      captcha: "",
      password: "",
      phone: "",
      form: {
        mobile: "",
        password: "",
        // 1 采购商 2 供应商
        type: 1
      },
      timeNum:0,
      captchaText:'',
      captchaSrc:'',
      xieyi:""
    };
  },

  computed: {

  },
  watch: {},
  created() {
    window.localStorage.clear();
    this.generateCaptcha();
    this.getXiyi();
  },
  methods: {
    getXiyi(){
       this.$httpApi('/api/setting',{},'get').then(res => {
        console.log(res);
        this.xieyi = res.data.site_xieyi;
       })
    },
     // 生成验证码
     generateCaptcha() {
      const length = 4; // 验证码长度
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let captcha = '';
      for (let i = 0; i < length; i++) {
        captcha += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captchaText = captcha;
      this.captchaSrc = this.drawCaptcha(captcha);
    },
    // 绘制验证码到 canvas 并转换为图片 src
    drawCaptcha(text) {
      const canvas = document.createElement('canvas');
      canvas.width = 100;
      canvas.height = 40;
      const ctx = canvas.getContext('2d');
      ctx.font = '24px Arial';
      ctx.fillStyle = '#000';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#fff';
      for (let i = 0; i < text.length; i++) {
        const x = 20 + i * 20;
        const y = 25 + Math.random() * 10;
        ctx.fillText(text[i], x, y);
      }
      // 添加干扰线
      for (let i = 0; i < 5; i++) {
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
        ctx.strokeStyle = '#fff';
        ctx.stroke();
      }
      return canvas.toDataURL();
    },
    // 刷新验证码
    refreshCaptcha() {
      this.generateCaptcha();
    },
    resetPassword(){
      if (!this.phone){
        alertErr('请输入手机号码');
        return
      }

      if(!this.password){
        alertErr('请输入验证码');
        return
      }
      if(!this.captcha){
        alertErr('请输入密码');
        return
      }

      this.$httpApi('/api/resetPwd',{
        mobile: this.phone,
        code: this.password,
        password: this.captcha 
      }, 'post').then(res=>{
        if(res.code == 200){
          alertSucc('重置密码成功');
          this.showType = false 
        }else {
          alertErr(res.msg);
        }
      }).catch(error => {
        alertErr(error.msg);
      })

    },
    getCode() {
      if (this.phone) {
        this.$httpApi('/api/send', {
          mobile: this.phone
        }, 'post').then(res => {
          if (res.code == 200) {
            console.log(res);
            this.timeNum = 60;
            setInterval(() => {
              this.timeNum--;
              if (this.timeNum <= 0) {
                clearInterval();
              }
            }, 1000)

          } else {
            alertErr(res.msg);
          }
        })
      } else {
        alertErr('请输入手机号码');
      }

      console.log('获取验证码');
    },
    registerLink() {
      this.dialogVisible = true
    },
    JiaOnChange() {
      this.isBuyer = false;
      this.form.type = 2
    },
    maiJiaOnChange() {
      this.isBuyer = true;
      this.form.type = 1
    },
    handleAgree() {
      // 这里添加用户点击同意后的逻辑，比如进行注册流程等
      console.log('用户点击了同意')


      if (this.isBuyer == true) {

        this.$router.push('/purchaser')

        this.dialogVisible = false
      } else {

        this.$router.push('/applyForDdmission')

        this.dialogVisible = false

      }


    },
    toggleMobileMenu() {

    },
    login() {

      if (this.captcha.toUpperCase() !== this.captchaText.toUpperCase()) {
        alertErr('验证码输入错误，请重新输入');
        this.generateCaptcha();
        return;
      }

      this.$httpApi("/api/web_login", {
        ...this.form,
      }, "post").then(res => {
        if (res.code == 200) {
          this.$store.commit("set_baseInfo", res.data);
          this.$store.dispatch("getUserloginedInfo");
          setTimeout(() => {
            if(!this.isBuyer){
              this.$router.push("/supplierIndex/SupplierPersonal");
            }else {
              this.$router.push("/prefecturePage/indexFirst");
            }
            
          }, 1000)
        } else {
          alertErr(res.msg);
        }
      })


    },
    register() {
      this.showType = false
    },
    forgotPassword() {
      this.showType = true
    },
    getCaptcha() {
      // 这里可以添加获取验证码的逻辑，比如发送请求到后端
      console.log('获取验证码，手机号：', this.form.phone)
    },
    goBack() {
      // 这里可以添加返回登录页面的逻辑，比如路由跳转
      console.log('返回登录页面')
    }

  },
};
</script>

<style scoped lang="less">
.inputCheckbox {
  width: 18px;
  height: 18px;
}

.inputCheckboxTwo {
  width: 18px;
  height: 18px;
  position: relative;
  top: 2px;
  margin-left: 40px;
}

.jzText {
  padding-left: 10px;
  font-size: 14px;
  color: #999999;
}

.wjMText {
  font-size: 14px;
  color: #316AD3;
  font-weight: 400;
  font-family: Microsoft YaHei, Microsoft YaHei;
}

.czTitle {
  text-align: center;
  margin-bottom: 36px;

  font-family: PingFang SC, PingFang SC;

  font-size: 24px;
  color: #333333;

  font-style: normal;
  text-transform: none;
}

.iTitle {
  border-right: 1px solid #EEEEEE;
  width: 80px;
  font-style: normal !important;
  font-size: 14px;
  text-align: center;
  color: #666666 !important;
}

.inputTwo {
  width: 100%;
  padding-left: 110px !important;
}

.czMcode {
  position: absolute;
  right: 2px;
  top: 0px;
  padding: 0 15px;
  background-color: #F7F8FA;
  bottom: 0;
  margin: auto;
  height: 30px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #2477F7;
  line-height: 30px;
  font-style: normal;
  text-transform: none;
}

.loginInput {
  width: 100%;
}

.loginTitle {
  padding: 40px;
}

/deep/ .el-dialog {
  width: 900px;
}

.pTitle {
  text-indent: 2em;
}

.zcContent {
  width: 821px;
  height: 372px;
  font-family: PingFang SC, PingFang SC;
  margin: auto;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.zhuceH3 {
  color: #000;
  text-align: center;
  margin-bottom: 15px;
}

/deep/ .el-dialog__header {
  padding: 0 !important;
}


/deep/ .el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 19px;
}

/deep/ .el-dialog__footer {
  padding: 0 0 22px 0 !important;
  background: #F7F7F7;
  border-radius: 4px 4px 0px 0px;
  width: 100%;
  //  height: 88px;
  text-align: center;
}

// .dialog-footer {

//   background: #F7F7F7;
//   border-radius: 4px 4px 0px 0px;
//   text-align: center;

// }

.footerPay {
  width: 160px;
  height: 44px;
  background: #014BC4;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 4px 4px;
}

.footerColse {
  width: 160px;
  height: 44px;
  border-radius: 4px 4px 4px 4px;
  margin-top: 22px;
  border: 1px solid #D4DEE2;
}


.menu-icon {
  padding-left: 40px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

.header {
  width: 1600px;
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 20px 50px;
  background-color: white;
  margin: auto;
}


.logo img {
  width: 205px;
  height: 78px;
}

.nav ul {
  list-style: none;
  display: flex;
}

.nav ul li {
  font-family: PingFang SC, PingFang SC;
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  font-style: normal;
  text-transform: none;
  margin-right: 77px;
}

.nav ul li a {
  text-decoration: none;
  color: #333;
}

.user-actions {
  display: flex;
  align-items: center;
  padding-left: 110px;
}

.user-actions a {
  text-decoration: none;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-style: normal;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-right: 8px;
}

.heart-icon {
  font-size: 20px;
  cursor: pointer;
}

.main {
  position: relative;
  // min-height: 69vh;
}

.bg-image {
  width: 100%;
  height: 664px;
  // position: absolute;
  top: 0;
  left: 0;
  // z-index:-1;
}

.bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.login-box {
  position: absolute;
  top: 50%;
  right: 23%;
  transform: translateY(-50%);
  background-color: white;

  width: 480px;
  height: 496px;
  border-radius: 16px 16px 16px 16px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
}

.login-tabs {
  display: flex;
  margin-bottom: 20px;
}

.login-tabs span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #6B6B6B;
  line-height: 32px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  transition: all 0.3s ease;

}

.spanTwo {
  margin-left: 32px;
}

.login-tabs span.active {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #014BC4;

  text-align: center;
  font-style: normal;
  text-transform: none;
  border-bottom: 3px solid #014BC4;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-group i {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: #686868;
}


.input-group i img {
  width: 20px;
  height: 24px;
}

.input-group input {
  background: #F7F8FA;
  padding: 10px 10px 10px 55px;
  height: 44px;
  border: 1px solid #D4D4D4;
  border-radius: 4px 4px 4px 4px;

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #686868;

  font-style: normal;
  text-transform: none;
}

.captcha-img {
  width: 98px;
  height: 44px;
  cursor: pointer;
  padding-left: 9px;
}

.remember-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}

.remember-me a {
  color: #007bff;
  text-decoration: none;
}

.login-btn {
  width: 100%;

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;

  font-style: normal;
  text-transform: none;
  margin-top: 5px;

  border: none;

  cursor: pointer;

  height: 50px;
  background: #014BC4;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 4px 4px;
}

.register-link {
  display: block;
  text-align: center;
  margin-top: 16px;

  text-decoration: none;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #014BC4;

  font-style: normal;
  text-decoration-line: underline;
  text-transform: none;
}

.agreement {
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  height: 40px;
  line-height: 40px;

  background: #F5F6F8;
  border-radius: 0px 0px 16px 16px;
}


.footer {
  background-color: #f4f4f4;
  padding: 50px 0;
  width: 100%;
  height: 320px;
  text-align: center;

}

.footer-columns {
  display: flex;

  margin-bottom: 20px;
}

.column {
  margin-left: 280px;
  text-align: left;
}

.column h2 {
  margin-bottom: 10px;
}

.column ul {
  list-style: none;
}

.column ul li {
  line-height: 40px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.column ul li a {
  font-family: Avenir, Avenir;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  color: #979798;
  font-size: 14px !important;
}

.column ul li i {
  position: relative;
  top: -8px;
  margin-right: 5px;
}

.copyright {
  border-top: 1px solid #D3D8DE;
  height: 56px;
  font-size: 12px;
  line-height: 56px;
  font-family: Arial, Arial;
  font-weight: 400;

  color: #546177;

  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 55px;

}

.phone-icon::before {
  content: "\f095";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.email-icon::before {
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.location-icon::before {
  content: "\f041";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.user-icon::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.lock-icon::before {
  content: "\f023";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.check-icon::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
</style>